<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=".css">
    <title>Document</title>
</head>
<style>
    div{
    display: inline-block;
    }
</style>
<body>
    <div class="box1">
        <!-- <img src="" alt=""> -->
    </div>
    <div class="box2">
        <!-- <img src="" alt=""> -->
    </div>  
    <div class="box3">
        <!-- <img src="" alt=""> -->
    </div>
    <script src="1.js"></script>
    <script>
        //上到下
        let l1= new Light('.box1')
        l1.init(1)
        //自动上到下，鼠标移入停止播放，移出继续播放
        let l2= new Light('.box2')
        l2.init()
        l2.enter()
        l2.auto('down')
        l2.leave('down')
        //自动往复播放，先上到下，鼠标移入停止播放，移出继续播放
        let l3= new Light('.box3')
        l3.init()
        l3.enter()
        l3.auto('reverse')
        l3.leave('reverse')
    </script>
</body>
</html>